<template>
    <div class="editIcon">
        <ul class="infoBoxChild clearfix">
            <li v-for="(item,i) in indexMsg.items[modeType]" :key="item.id" v-if="i>length-1?false:true" @click="editUrl(item.id)">
                <!-- <router-link :to="toUrl+'/'+item.id"> -->
                <div class="infoImg">
                    <div class="miniBox">
                        <div class="miniVip" v-if="item.is_vip"></div>
                        <div class="miniNew" v-if="item.update"></div>
                    </div>
                    
                    <img :src="item.image" alt="" :title="item.title">
                    <!-- <div class="clearfix infoTextBox">
                        <div class="infoText">
                            <p class="vipText"></p>
                           <p class="infoItemId">ID:&nbsp<span>{{item.id}}</span></p>
                        </div>
                    </div> -->
                    <p class="infoItemPrompt">
                        <span class="vipText" :title="item.title">{{item.title}}</span>
                        <button class="collBox" :class="{'redClass':isInArray(item.id)}" @click.prevent.stop="collection({e:$event,id:item.id,type:modeType})">
                            <i class="coll" :class="{'avtiveColl':isInArray(item.id)}"></i>
                            <!-- {{isInArray(item.id)?"已收藏":"收藏"}} -->
                        </button>
                        <button class="downBox" @click.prevent.stop="confirmDownload($event,item.id,item.title)">
                            <i class="downloadStatus"></i>
                            <!-- 下载 -->
                        </button>
                    </p>
                </div>
                <!-- </router-link> -->
            </li>
        </ul>
        <div v-if="indexMsg&&indexMsg.items[modeType].length==0" class="contentNull" :class="{searchClass,'searchClass':searchText}">
            <!-- 暂无内容 -->
        </div>
    </div>
</template>
<script>
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
// import jwtToken from '../helpers/jwt'
export default{
    name : "modeList",
    props: ["length",//渲染的个数
            "toUrl",//要跳转的地址
            "indexMsg",//请求回来的信息
            "modeType",//请求信息的类型
            "searchClass",//搜索class
            "searchText"
            ],
    data(){
        return {
            msg: "模型列表",
            modal10: false,
        }
    },
    computed: {
        ...mapState({//登录的用户信息
            user: state => state.AuthUser
        }),
        mismatchError() {
            return this.bag.has('password:auth') && !this.errors.has('password')
        },
    },
    updated(){
        this.$previewRefresh();//查看大图  请求回来刷新下数据
    },
    methods:{
        confirmDownload(event,id,title) {
            var down = null;
            var errorMsg = "";
            if(this.modeType=="7"){
                down = "/downarticle/";
                errorMsg = "请开通VIP后再进行下载";
            }else{
                down = "/downdata/";
                errorMsg = "交易币不足，请充值后再进行下载...";
            }
            if(this.$store.state.AuthUser.userInfo){
                
                this.$Modal.confirm({
                    title: '提示',
                    content: '<p>确认下载?</p>',
                    loading: false,
                    draggable : true,
                    scrollable:true,
                    onOk: () => {
                       this.modeDownload(id,title,down,errorMsg)
                    }
                });
            }else{
                this.loginShow();
            }
                
            
        },
        editUrl(id){
            var type = 'detail';
            if(this.modeType=='7'){
                type = 'article';
            }
            if(!this.user.userInfo){
                window.open(appPath+type+'/'+this.modeType+'/'+id+'/getInfo');
                return;
            }
            var urlTop = {
                "url" : this.$route.fullPath,
                "top" :　$(window).scrollTop(),
                "id" : id,
                "modeType" : this.modeType,
            }
            if(this.modeType=='7'){
                this.definitionMaskShow(urlTop)
                // history.pushState('','',window.location.origin+'/'+this.toUrl+'?modeId='+id)
            }else{
                this.listModeShow(urlTop);
                // history.pushState('','',window.location.origin+this.toUrl+'?modeId='+id)
            }
            // this.listModeShow(urlTop);
            history.pushState('','',window.location.origin+'/'+this.toUrl+'?modeId='+id)
            
            $('body').css({
                "overflow":"hidden"
            });
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        },
         errorWarning(msg,n) {
             var This = this;
             this.$message({
                    message: msg,
                    type: 'error',
                    customClass : 'downLoadError',
                    duration : 2000,
                    showClose : true,
                    onClose:function () {
                        if(n){
                            let routeData = This.$router.resolve({ path: '/recharge'});
                            window.open(routeData.href, '_blank');
                        }
                    }
                });
        }, 
         ...mapMutations(//mutations中的方法
            ["loginShow","loginClose","loginLoginName","registerLoginName","collection","listModeShow","definitionMaskShow"]
        ),
        modeDownload(id,name,down,errorMsg){//模型下载
                
                axios({
                    method: 'get',
                    url: down+id,
                    // responseType: 'blob'
                }).then(response => {
                    // return;
                    if(response.data.status=="1"){
                        // window.open(this.user.userInfo.data.app_url+"api/downurl/"+this.user.userInfo.data.user_id+"/"+this.modeType+"/"+id+"/"+response.data.passkey,"_blank"); 
                        window.location.href = this.user.userInfo.data.app_url+"api/downurl/"+this.user.userInfo.data.user_id+"/"+this.modeType+"/"+id+"/"+response.data.passkey;
                    }else if(response.data.status=="0"){
                        this.errorWarning(errorMsg,true);
                    }
                    // return;
                    // var blob = new Blob([response.data],{type:response.headers['content-type']});
                    // this.download(response.data,name)
                }).catch((error) => {
                    this.errorWarning("下载失败",false);
                }) 
         },
          
         // 下载文件
        download (data,name) {//下载要执行的函数
            if (!data) {
                return
            }
            
            let url = window.URL.createObjectURL(data)
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', name+'.rar')
            document.body.appendChild(link)
            link.click()
        },
       isInArray(value){
           var arr = null;
           if(!this.user.userInfo){
               return
           }else{
               if(this.modeType!="7"){
                arr = this.user.userInfo.data.datacollects;
                }else{
                    arr = this.user.userInfo.data.articlecollects;
                }
                for(var i = 0; i < arr.length; i++){
                    if(value === arr[i]){
                        return true;
                    }
                }
                return false;
           }
           
        }

    }
             
}
</script>
<style>
@import "../css/global.css";
.downLoadError{
    margin-top: 20%;
    font-size: 50px;
}
.editIcon .infoItemPrompt i{
    display: inline-block;
    width: 20px;
    height: 18px;
    vertical-align:middle;
    margin-top: -4px;
}
.editIcon .coll{
    background: url(./img/coll.png) no-repeat center;
}
.editIcon .infoItemPrompt button:hover .coll{
    background: url(./img/hoverColl.png) no-repeat center;
}
.editIcon .downloadStatus{
    background: url(./img/downloadNum2.png) no-repeat center;
}
.editIcon .infoItemPrompt button:hover .downloadStatus{
    background: url(./img/hoverDownload.png) no-repeat center;
}
.editIcon .avtiveColl{
    background: url(./img/hoverColl.png) no-repeat center;
}
.editIcon .infoItemPrompt button:hover .avtiveColl{
    background: url(./img/hoverColl.png) no-repeat center;
}
.redClass{
    color: #ec6560!important;
}
.editIcon .infoImg img{
    height:204px;
}
.miniBox{
    position:absolute;
    top:0;
    padding-left: 25px;
}
.miniVip{
    display:inline-block;
    margin-right: 11px;
    height: 40px;
    width: 32px;
    background: url(./img/miniVip1.png) no-repeat left top;
}
.miniNew{
    display:inline-block;
    height: 40px;
    width: 32px;
    background: url(./img/newUpload1.png) no-repeat left top;
}
.editIcon .infoBoxChild li{
    width: 410px;
    height: 310px;
}
.alertMask{
    width: 420px!important;
    height: 136px!important;
}



</style>

